<template>
    <div class="fiterGtLt">
        <el-select v-model="label_key" style="width:115px;margin-right:4px;" @change="onChangeValue">
            <el-option
            v-for="item in filterArray"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="equation_value" style="width:80px;margin-right:4px;" @change="onChangeValue">
            <el-option
            v-for="item in equations"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-input type="number" placeholder="输入数值" clearable v-model="value" style="width:145px;" @input="onChangeValue"></el-input>
    </div>
</template>

<script>
export default {
    name: 'FiterGtLt',
  
    data() {
        return {
            equations: [
                {value: 'gt', label: '大于'},
                {value: 'gte', label: '大于等于'},
                {value: 'lt', label: '小于'},
                {value: 'lte', label: '小于等于'},
                {value: 'eq', label: '等于'},
            ],
            equation_value: 'gt', //默认大于
            label_key: 'reach',
            value: '',
            filterArray: [
                {value: 'reach', label: "覆盖人群"},
                {value: 'impressions', label: "展示次数"},
                {value: 'fb_mobile_purchase', label: "充值人数"},
                {value: 'mobile_app_install', label: "安装量"},
                {value: 'mobile_app_install_unique', label: "安装量-去重"},
                {value: 'frequency', label: "展示频次"},
                {value: 'clicks', label: "点击量"},
                {value: 'fb_mobile_purchase_unique', label: "首充人数"},
                {value: 'fb_mobile_complete_registration', label: "注册量"},
                {value: 'spend', label: "花费金额"},
                {value: 'cost_per_unique_conversion', label: "首充成本"},
                {value: 'fb_mobile_complete_registration_unique', label: "注册量-去重"},
                {value: 'fb_pixel_purchase', label: "购物(销量)"},
                {value: 'fb_pixel_add_to_cart', label: "加入购物车(销量)"},
                {value: 'fb_pixel_complete_registration', label: "已完成注册(销量)"},
            ]
        }
    },
    methods: {
        onChangeValue() {
            let value = `${this.equation_value},${this.value}`;
            if(this.value == '') {
                value = ''
            }
            this.$emit('change', {
                key: this.label_key,
                value: value
            });
        }
    }
}
// (字段名)=gt(大于),gte（大于等于）,lt（小于）,lte（小于等于）,eq（等于）
</script>

<style lang="scss" scoped>
.fiterGtLt{
    display: flex;
    align-items: center;
    .name{
        display: inline-block;
        width: 80px;
        text-align: right;
        font-size: 14px;
        white-space: nowrap;
        margin-right: 6px;
    }

}
</style>